<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舌诊AI分析 - 中医智能诊断系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4A5568',
                        secondary: '#718096'
                    },
                    borderRadius: {
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <div id="desktop-view" class="w-[1440px] mx-auto p-6 block">
        <!-- 导航栏 -->
        <nav class="bg-white p-4 mb-6 shadow-md rounded-lg">
            <div class="flex justify-between items-center">
                <a href="index.html" class="text-2xl font-bold">中医智能诊断系统</a>
                <div class="flex gap-4">
                    <a href="舌诊AI分析.html" class="text-primary font-bold">舌诊AI分析</a>
                    <a href="体质评分系统.html" class="text-gray-600">体质评分系统</a>
                    <a href="健康数据监测.html" class="text-gray-600">健康数据监测</a>
                    <a href="产后关怀专区.html" class="text-gray-600">产后关怀专区</a>
                    <a href="个人中心.html" class="text-gray-600">个人中心</a>
                    <a href="会员订阅.html" class="text-gray-600">会员订阅</a>
                </div>
            </div>
        </nav>
        
        <!-- 舌诊AI分析模块 - 桌面版 -->
        <div class="bg-white p-6 rounded-lg shadow-lg mb-8">
            <div class="flex items-center justify-between mb-6">
                <button class="text-gray-600 !rounded-button" onclick="window.location.href='index.html'">
                    <i class="fas fa-arrow-left text-xl"></i>
                </button>
                <h1 class="text-2xl font-bold">舌诊 AI 分析</h1>
                <button class="bg-primary text-white px-4 py-2 !rounded-button" id="toggle-mobile-view">
                    <i class="fas fa-mobile-alt mr-2"></i>查看移动版
                </button>
            </div>
            
            <div class="relative w-full h-[400px] bg-gray-100 rounded-lg mb-6">
                <div class="absolute inset-0 border-2 border-dashed border-gray-300 m-4 rounded-lg flex items-center justify-center">
                    <i class="fas fa-camera text-4xl text-gray-400"></i>
                </div>
                <div class="absolute bottom-4 right-4 flex gap-4">
                    <button class="bg-white p-2 rounded-full shadow-lg">
                        <i class="fas fa-bolt text-gray-600"></i>
                    </button>
                    <button class="bg-white p-2 rounded-full shadow-lg">
                        <i class="fas fa-focus text-gray-600"></i>
                    </button>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex gap-4 mb-6">
                    <button class="flex-1 py-2 bg-primary text-white !rounded-button tab-button" data-tab="tab-1">舌象特征</button>
                    <button class="flex-1 py-2 bg-gray-100 text-gray-600 !rounded-button tab-button" data-tab="tab-2">体质类型</button>
                    <button class="flex-1 py-2 bg-gray-100 text-gray-600 !rounded-button tab-button" data-tab="tab-3">健康建议</button>
                </div>
                
                <div id="tab-1" class="tab-content space-y-4 block">
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <h3 class="font-bold mb-2">舌质分析</h3>
                        <p class="text-gray-600">舌质淡红，舌体适中，舌苔薄白，显示脾胃功能正常。</p>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <h3 class="font-bold mb-2">舌苔分析</h3>
                        <p class="text-gray-600">舌苔分布均匀，无剥落，提示消化系统功能良好。</p>
                    </div>
                </div>
                
                <div id="tab-2" class="tab-content space-y-4 hidden">
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <h3 class="font-bold mb-2">体质评估</h3>
                        <p class="text-gray-600">根据舌诊分析，您可能属于脾胃质偏向，建议进一步完成体质评分系统测试。</p>
                        <button class="mt-2 bg-primary text-white px-4 py-2 !rounded-button" onclick="window.location.href='体质评分系统.html'">
                            前往体质评分
                        </button>
                    </div>
                </div>
                
                <div id="tab-3" class="tab-content space-y-4 hidden">
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <h3 class="font-bold mb-2">健康建议</h3>
                        <ul class="list-disc list-inside text-gray-600">
                            <li>饮食规律，少食多餐</li>
                            <li>避免过度劳累，保证充足睡眠</li>
                            <li>适量饮水，保持良好心态</li>
                        </ul>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <h3 class="font-bold mb-2">注意事项</h3>
                        <p class="text-gray-600">本分析仅供参考，如有不适请及时就医。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 舌诊AI分析模块 - 移动版 -->
    <div id="mobile-view" class="hidden">
        <div class="min-h-screen bg-gray-50">
            <header class="fixed top-0 left-0 right-0 bg-white shadow z-50">
                <div class="flex items-center justify-between px-4 py-3">
                    <button class="text-gray-600" id="back-to-desktop">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"></path></svg>
                    </button>
                    <h1 class="text-lg font-medium">舌诊分析</h1>
                    <button class="text-blue-600">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                    </button>
                </div>
            </header>

            <main class="pt-16 pb-20">
                <div class="aspect-square mx-4 mt-4 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center bg-gray-50">
                    <div class="text-center">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        <p class="mt-2 text-sm text-gray-500">点击拍照或上传舌像</p>
                    </div>
                </div>
                <div class="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl shadow-lg">
                    <div class="px-4 py-3">
                        <div class="flex space-x-4 border-b">
                            <button class="pb-3 text-blue-600 border-b-2 border-blue-600 mobile-tab" data-mobile-tab="mob-tab-1">舌象特征</button>
                            <button class="pb-3 text-gray-500 mobile-tab" data-mobile-tab="mob-tab-2">体质类型</button>
                            <button class="pb-3 text-gray-500 mobile-tab" data-mobile-tab="mob-tab-3">健康建议</button>
                        </div>
                        <div id="mob-tab-1" class="py-4 mobile-tab-content block">
                            <div class="space-y-4">
                                <div class="bg-gray-50 rounded-lg p-4">
                                    <h3 class="font-medium">舌质分析</h3>
                                    <p class="mt-2 text-sm text-gray-500">舌质淡红，舌体适中，纹理清晰</p>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-4">
                                    <h3 class="font-medium">舌苔分析</h3>
                                    <p class="mt-2 text-sm text-gray-500">薄白舌苔，分布均匀</p>
                                </div>
                            </div>
                        </div>
                        <div id="mob-tab-2" class="py-4 mobile-tab-content hidden">
                            <div class="bg-gray-50 rounded-lg p-4">
                                <h3 class="font-medium">体质评估</h3>
                                <p class="mt-2 text-sm text-gray-500">脾胃质偏向，建议进一步测试</p>
                                <button class="mt-3 w-full bg-blue-600 text-white py-2 rounded-lg">前往体质评分</button>
                            </div>
                        </div>
                        <div id="mob-tab-3" class="py-4 mobile-tab-content hidden">
                            <div class="bg-gray-50 rounded-lg p-4">
                                <h3 class="font-medium">健康建议</h3>
                                <ul class="mt-2 text-sm text-gray-500 space-y-1">
                                    <li>• 饮食规律，少食多餐</li>
                                    <li>• 避免过度劳累</li>
                                    <li>• 保持良好心态</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 桌面版标签切换
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', () => {
                document.querySelectorAll('.tab-button').forEach(btn => {
                    btn.classList.remove('bg-primary', 'text-white');
                    btn.classList.add('bg-gray-100', 'text-gray-600');
                });
                
                button.classList.remove('bg-gray-100', 'text-gray-600');
                button.classList.add('bg-primary', 'text-white');
                
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.add('hidden');
                });
                
                document.getElementById(button.dataset.tab).classList.remove('hidden');
            });
        });
        
        // 移动版标签切换
        document.querySelectorAll('.mobile-tab').forEach(button => {
            button.addEventListener('click', () => {
                document.querySelectorAll('.mobile-tab').forEach(btn => {
                    btn.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
                    btn.classList.add('text-gray-500');
                });
                
                button.classList.remove('text-gray-500');
                button.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
                
                document.querySelectorAll('.mobile-tab-content').forEach(content => {
                    content.classList.add('hidden');
                });
                
                document.getElementById(button.dataset.mobileTab).classList.remove('hidden');
            });
        });
        
        // 切换桌面/移动视图
        document.getElementById('toggle-mobile-view').addEventListener('click', () => {
            document.getElementById('desktop-view').classList.add('hidden');
            document.getElementById('mobile-view').classList.remove('hidden');
        });
        
        document.getElementById('back-to-desktop').addEventListener('click', () => {
            document.getElementById('mobile-view').classList.add('hidden');
            document.getElementById('desktop-view').classList.remove('hidden');
        });
    </script>
</body>
</html>